<template>
	<div id="string-syntax" :style="{ height: height + 'px' }" class="mainWrap" style="padding-top: 0rpx;">
<!-- 		<p v-t="'hello'"></p>
		<p v-t="path"></p> -->
			<view class="swiper-box" :style="{width:750+'upx',height:height+'px'}">
					<swiper class="swiper" :vertical="true" @change='swiperChange' :circular="true" :current="swiperCurrent"
						:style="{width:750+'upx',height:height+'px'}">
						<swiper-item v-for="(item,index) in splist" :key='index' :style="{width:750+'upx',height:height+'px'}" v-if="item.transcribe == 0">
							<view class="swiper-item" @click.stop="tabVideo" :style="{width:750+'upx',height:height+'px'}" >
								<scroll-view scroll-y="true" style="height: 100%;width: 100%;" v-if="index==swiperCurrent">
									<!-- <text style="font-size: 40upx;color: #FFFFFF;">{{index}}{{swiperCurrent}}</text> -->
									<video id="myVideo" :autoplay="true"  :controls="false" :enable-progress-gesture="false" :show-center-play-btn="false" :src="item.addressitem" :style="{width:750+'upx',height:height-80+'px'}" class="videoPlayer" object-fit="contain"></video>
									
								</scroll-view>
								
							</view>
							<div class="tip">
								<scroller class="tip-scroller">
									<div class="tip-content">
										<text class="text">{{ userInfo.system_notice }}</text>
									</div>
									<div v-for="(item, index) in msgList" :key="index">
										<div class="tip-scroller__msg" :class="[item.username ? 'tip-scroller__msg--active' : '']">
											<text class="tip-scroller__tag tip-scroller__member"
												v-if="item.username">{{ item.username ? item.member_rank : '' }}</text>
											<text class="tip-scroller__tag"
												v-if="item.username">{{ item.username ? item.rank : '' }}</text>
											<text class="tip-scroller__username"
												@click="showActive(item)">{{ item.username ? item.username + ': ' : '' }}</text>
											<text class="tip-scroller__content">{{ item.msg }}</text>
										</div>
										<div :ref="'msg-' + index"></div>
										
									</div>
								</scroller>
							</div>
						</swiper-item>
					</swiper>
				</view>
		<!-- <video id="myVideo" :autoplay="true"  :controls="false" :enable-progress-gesture="false" :show-center-play-btn="false" :src="pullurl" :style="{width:750+'upx',height:height+'px'}" class="videoPlayer" object-fit="contain"></video> -->
		<div class="frame">
			<div class="main">
				<div class="header">
					<div class="header-left">
						<image class="avatar" :src="userInfo.shop_logo" @click="linkTo('/pagesC/home/personage/personage?userId='+shopid)"></image>
						<div class="header-left__middle"
							@click="linkTo('/pagesC/home/personage/personage?userId='+shopid)">
							<text class="header-left__middle--top">{{ userInfo.shop_name}}</text>
							<text class="header-left__middle--bottom">在线人数:{{ online_num }}</text>
							<text class="header-left__middle--bottom">本场点赞：{{ like_num }}</text>
						</div>

						<div class="header-left__right ">
							<text class="follow" @click="follow">{{ userInfo.is_follow === 1 ? '已关注' : '关注'}}</text>
						</div>
					</div>
					<text class="report-anchor" @click="linkTo('/pages/live/report','shop_id',shop_id)">举报</text>
					<div class="topRightWrap" @click="onClose">
						<image class="topRightWrapClose" src="../../static/images/live/close.png"></image>
					</div>
				</div>
				<div class="info">
					<div class="info-left">
						<text class="color-white">粉丝值:{{ userInfo.follow_num }}</text>
					</div>
				</div>

				


				<div v-if="isInputShow" class="input-wrap">
					<input ref="input" class="input" maxlength="20" confirm-type="send" focus placeholder="" type="text"
						@blur="isInputShow = false" @confirm="send" @focus="onFocus" @input="onInput"
						@keyboardheightchange="onKeyboard" />
				</div>

				<div class="footer">
					<div class="footerOrder" @click="openAliveGoodsList" >
						<image class="goodsImg" src="../../static/images/live/icon-liveBaby.png"></image>
						<text class="color-white goodsListLength" v-if="goodsList.length>0">{{goodsList.length}}</text>
						<text class="color-white goodsListLength" v-else>{{zhilist.length}}</text>
					</div>

					<div class="chat" @click="showInput"><text class="color-white">想要说的话</text></div>

					<div class="footerRight">
						<image v-if="isGiftShow" class="like-icon footerShareIcon"
							src="../../static/images/icon-share.png" @click="showGift"></image>
						<image class="like-icon footerShareIcon" src="../../static/fenxiang.png"
							@click="isShareShow = true"></image>
						<image class="like-icon" src="../../static/images/praiseIcon/icon-appraise.png" @click="like">
						</image>
					</div>
				</div>
			</div>

			<div class="like-warp">
				<image v-for="(item, index) in likeList" :key="index"
					:class="[item.active ? 'like-active'+item.random: '']"
					:src="'../../static/images/praiseIcon/bg'+item.random+'.png'" class="like-image"></image>
			</div>
			<div class="blockWrap" v-if="Object.keys(currUserInfo).length>0" :style="{left:getBlockLeft}">
				<div class="blockUserInfo">
					<image class="blockAvatar" :src="currUserInfo.headimgurl"></image>
					<text style="color:#fff;font-size: 28upx">确定{{getBlockTypeName}}用户名{{currUserInfo.username}}</text>
				</div>
				<div class="blockWrapSselect">
					<div v-for="(item,index) in blocklist" class="selectItem" :key="index" @click="selectBlock(index)">
						<span class="selectCircle" :class="{selectCircleactive:selectIndex===index}"></span>
						<text class="selectName" :class="{selectNameactive:selectIndex===index}">{{item.name}}</text>
					</div>
				</div>
				<button class="confirmBtn" @click="blockUser">确定</button>
				<text class="cancleBtn" @click="cancleBlock">取消</text>
			</div>

			<wxc-popup popup-color="#fff" :show="isShareShow" :overlay-cfg="{ opacity: 0 }"
				@wxcPopupOverlayClicked="popupOverlayBottomClick" pos="bottom" height="140" class="popup-panel">
				<div class="shareBox">
					<div class="shareItem" @click="shareApp">
						<image class="shareIconWrap" src="../../static/images/icon-shareApp.png"></image>
						<text class="shareTit">分享APP</text>
					</div>
					<div class="shareItem" @click="onShare">
						<image class="shareIconWrap" src="../../static/images/icon-shareLiveroom.png"></image>
						<text class="shareTit">分享直播间</text>
					</div>
				</div>
			</wxc-popup>

			<wxc-popup :show="isGiftShow" height="290" popup-color="transparent" pos="bottom"
				@wxcPopupOverlayClicked="popupOverlayBottomClick">
				<div class="giftPanel">
					<div class="giftTitleWrap">
						<text class="giftTitle">礼物</text>
						<div></div>
					</div>
					<div class="giftBox">
						<div v-for="(item, index) in giftsList" :key="index"
							:class="{isGiftActive:giftSelectIndex===index}" class="gitBoxItem"
							@click="selectGift(item,index)">
							<image :animation="animationData" :src="item.pic" class="gitBoxItemPic" resize="contain">
							</image>
							<text class="gitBoxItemName">{{ item.point }}</text>
						</div>
					</div>
					<div class="gifSendWrap">
						<text></text>
						<text class="giftSendBtn" @click="sendGift">赠送</text>
					</div>
				</div>
			</wxc-popup>

			<image ref="animationGift" :src="selectGiftItem.pic" class="animationGift"></image>

			<div v-if="isLiveOver" class="liveTipsWrap">
				<text class="color-white endName">直播间已结束</text>
				<text class="color-white liveIntroduction">{{ userInfo.live_desc }}</text>
				<text></text>
			</div>
			<liveGoodsList ref="liveGoodsList" :liveerInfo="userInfo" :userxx="useInfo"></liveGoodsList>
		</div>
	</div>
</template>

<script>
	import md5Libs from "uview-ui/libs/function/md5";
	import liveGoodsList from './components/liveGoodsList';
	import nvueCommon from '../../utils/nvueCommon';
	import {
		WxcPopup
	} from 'weex-ui';
	import {
		LIVESOKECT
	} from './../../config/index'

	const {
		md5
	} = md5Libs;
	const modal = weex.requireModule('modal') || {};
	const ws = weex.requireModule('webSocket');
	const dom = weex.requireModule('dom');
	const animationWeex = weex.requireModule('animation');
	var timer = null;
	let praiseAnSetInterVal;
	let page = 1;
	let token;
	//记录用户选择的属性
	let strRadio = []

	const globalData = getApp().globalData
	export default {
		mixins: [nvueCommon],
		data() {
			return {
				baseUrl: '',
				likeList: [],
				currChooseType: 3,
				goodSrc: '',
				src: '',
				value: '',
				text: '2',
				currLikeIndex: -1,
				goodsPage: 1,
				height: uni.getSystemInfoSync().windowHeight,
				mobileWidth: uni.getSystemInfoSync().windowWidth,
				isFrameShow: true,
				isForm: false,
				isFrameShow1: true,
				isGoodsShow: false,
				isGoodsAttrShow: false,
				isCustomerShow: false,
				isShareShow: false,
				isInputShow: false,
				isCommentShow: false,
				shopid: '',
				page: 1,
				commentPage: 1,
				roomId:'',
				goodsList: [],
				zhilist: [],
				orderList: [],
				giftsList: [],
				like_num: 0,
				online_num: 0,
				selectGiftItem: {},
				giftSelectIndex: 0,
				goodsInfo: [],
				goodsAttr: [],
				userInfo: {},
				userInfos: {},
				msgList: [],
				userAvatarList: [],
				walletPrice: 0,
				isGiftShow: false,
				giftImgList: [],
				isOnline: true,
				customerList: [],
				currIndex: 0,
				userInfoList: [],
				currUserInfo: {},
				pic: '',
				likenum: 0,
				splist:[],
				price: '',
				client_id: '',
				commentsList: [],
				role: '',
				isCurrService: false,
				serviceShopId: '',
				proNumber: 0, //  获取库存信息
				guige: '',
				radioattr: [], // 商品属性
				isPT: '',
				buyNum: 1,
				platform: '',
				appraiseList: [],
				appraiseNum: 40,
				swiperCurrent:0,
				userInfos:{},
				pullurl: '',
				videoContext:null,
				useinfo: {},
				keyBoardHeight: 0,
				isLivePause: false, //直播是否已暂停   用于用户从静默后台回到直播间  重启拉流
				isLiveOver: false, //直播间是否已结束
				isBlockShow: true, //禁言操作区
				selectIndex: 0,
				animationData: {},
				myuserinfo :{},
				animation: {},
				blocklist: [{
						checked: true,
						name: '拉黑'
					},
					{
						checked: true,
						name: '禁言'
					}
				]
			}
		},

		onShow() {
			console.log('从APP静默后台进入直播间')
			this.videoContext.play()
			if (this.isLivePause) {
				this.pullurl = uni.getStorageSync('pullurl')
			}
			//点赞轮询事件
			// praiseAnSetInterVal = setInterval(() => {
			//   this.like();
			// }, 500)
		},
		onHide() {
			console.log('APP进入静默后台',this.videoContext)
			this.videoContext.pause()
			clearInterval(praiseAnSetInterVal); //APP进入静默后台 暂停点赞轮询事件
		},
		components: {
			WxcPopup,
			liveGoodsList
		},
		computed: {
			getBlockLeft() {
				const width = this.mobileWidth - 30
				return width + 'upx'
			},
			getBlockTypeName() {
				return this.blocklist[this.selectIndex].name
			},


		},
		async onLoad(option) {
			
			this.getGiftList()
			this.shopid = await option.shop_id; // 获取直播间ID，直播间id现和店铺id绑定一致，由外部直播间列表点击是setStorageSync
			this.swiperCurrent = await option.index	
			console.log("-> this.shopid", this.shopid);
			this.baseUrl = await uni.getStorageSync('baseUrl'); // 获取接口根路径
			token = await uni.getStorageSync('token')
			console.log(token)
			this.client_id = await uni.getStorageSync('client_id')
			console.log("-> this.client_id", this.client_id);
			await this.getaliveinformation() //获直播间详情信息
			this.getAliveGoodsList()
			uni.$on('baseUrl', (data) => {
				this.baseUrl = data.baseUrl;
				console.log(this.baseUrl)
			})

			this.scroll();
			if (!token) {
				uni.showModal({
					title: "提示",
					content: "当前暂未登录,无法观看直播",
					confirmText: "登录",
					success: function(res) {
						if (res.confirm) {
							uni.navigateTo({
								url: '/pagesB/login/login'
							});
						} else if (res.cancel) {
							uni.navigateBack()
						}
					}
				});
				
			}
			this.platform = uni.getSystemInfoSync().platform;
			 this.videoContext = uni.createVideoContext('myVideo',this)
			uni.getStorage({
				key: 'serviceShopId',
				success: res => {
					this.serviceShopId = res.data;
				}
			});
			uni.getStorage({
				key: 'role',
				success: res => {
					this.role = res.data;
				}
			});

			// 使用vue@hook 在页面销毁时清除定时器  关闭sokect
			this.$once('hook:beforeDestroy', () => {
				clearInterval(timer);
				clearInterval(praiseAnSetInterVal);
				praiseAnSetInterVal = null
				timer = null;
				uni.closeSocket()
			})

			let timer = setInterval(() => {
				this.dianzan()
				this.likenum = 0
			}, 10000)
			this.getLiveVideoList()
			
		},
		onUnload() {
			console.log("页面没啦!!!!!!!!!!!!!!!!!!!!!!")
			
		},
		created() {
			let timer = setInterval(() => {
				this.dianzan()
				this.zhiboinfo()
				this.likenum = 0
			}, 10000)
				this.getLiveVideoList()
				this.videoContext = uni.createVideoContext('myVideo',this)
		},
		methods: {
			// pause: function() {
			// 	this.videoContext.pause({
			// 		success: (a) => {
			// 			console.log("livePusher.pause:" + JSON.stringify(a));
			// 			// this.pauseFale = true
			// 		}
			// 	});
			// },
			// play: function() {
			// 	this.videoContext.play({
			// 		success: (a) => {
			// 			console.log("livePusher.resume:" + JSON.stringify(a));
			// 			// this.pauseFale = false
			// 		}
			// 	});
			// },
			swiperChange(e) {
				// console.log(e.detail.current,"看看触发了没有")
				// let oldCurrent = this.swiperCurrent
				// this.msgList = []
				this.swiperCurrent = e.detail.current
				// this.swiperCurrent = e.detail.current
				this.shopid = this.splist[e.detail.current].shop_id
				console.log(this.msgList,"弹幕列表")
				this.getaliveinformation()
				this.initWebsocket(this.roomId);
			},
			getLiveVideoList(id,index){
				this.http('api/Alive/getaliveindex', {
					  typeid: -1,
					   page:this.page
				}).then(res => {
					this.splist = res.data.data.data
				})
			},
			zhiboinfo() {
				uni.request({
					url: "http://dsx.cdzer.com/api/Alive/getalivedata", //仅为示例，并非真实接口地址。
					data: {
						shop_id: this.shopid
					},
					header: {
						'content-type': 'application/x-www-form-urlencoded',
					},
					method: 'POST',
					success: (res) => {
						if (res.data.status == 200) {
							this.like_num = res.data.data.like_num;
							this.online_num = res.data.data.online_num
						} else {

						}
					}
				});
			},
			dianzan() {
				if (this.likenum !== 0) {
					uni.request({
						url: "http://dsx.cdzer.com/api/Alive/add_like", //仅为示例，并非真实接口地址。
						data: {
							likenum: this.likenum,
							room: this.userInfo.room
						},
						header: {
							'content-type': 'application/x-www-form-urlencoded',
						},
						method: 'POST',
						success: (res) => {
							console.log(res, "点赞")
							if (res.data.status == 200) {
								this.getAliveinformation()
							} else {
								uni.showToast({
									title: '点赞失败',
									icon: 'none'
								})
							}
						}
					});
				} else {
					console.log("不执行")
				}
			},
			// 获取直播间详情信息
			getaliveinformation() {
				this.http('api/Alive/aliveinformation', {
					shop_id: this.shopid
				}).then(res => {
					
					this.userInfo = res.data.data;
					this.pullurl = res.data.data.addressitem
					this.initWebsocket(res.data.data.room);
					this.roomId = res.data.data.room
					this.zhiboinfo()
					console.log("它有没有进来呢",this.roomId)
				})
			},

			// 点赞特效
			like() {
				this.userInfo.like_num++
				this.likenum++
				this.currLikeIndex = 0;
				const random = Math.floor(Math.random() * 6) + 1
				this.likeList.push({
					content: 1,
					active: false,
					random: random
				});
				const index = this.likeList.length;
				setTimeout(() => {
					this.$set(this.likeList[index - 1], 'active', true);
				}, 30);
				if (index > 30) {
					this.likeList.splice(0, 10)
				}
				console.log(index)
			},

			toDetail(item) {
				uni.navigateTo({
					url: '/pages/live/goodsDetail?id=' + item.id,
					animationType: 'slide-in-right',
					animationDuration: 300
				});
			},
			async openAliveGoodsList() {
				let thisRef = await this.$refs.liveGoodsList
				thisRef.goodsList = this.goodsList
				thisRef.isGoodsShow = true
				this.getAliveGoodsList()
			},
			showGift() {
				this.isGiftShow = true
			},
			// 直播间礼物列表
			getGiftList() {
				this.http('api/Alive/aliveGifts').then(res => {
					this.giftsList = res.data.data
				})
			},
			selectGift(item, i) {
				this.giftSelectIndex = i
				this.selectGiftItem = item

			},
			sendGift() {
				this.isGiftShow = false
				const ref1 = this.$refs.animationGift
				animationWeex.transition(ref1, {
					styles: {
						transform: 'translateY(-400px) scale(1.6)',
						opacity: 0
					},
					duration: 1000, //ms
					timingFunction: 'ease-in',
					needLayout: false,
					delay: 0 //ms
				}, function(result) {
					modal.toast({
						message: result.message
					})
				})


			},

			// 直播间商品列表
			getAliveGoodsList() {
				try {
					const value = uni.getStorageSync('userInfo');
					if (value) {
						this.userInfos = value
						var userInfos = JSON.parse(this.userInfos)
						console.log(userInfos,"66666666")
					}
				} catch (e) {
					// error
				}
				let thisRef = this.$refs.liveGoodsList

				const data = {
					page: this.page,
					shop_id: this.shopid
				}
				this.http('api/Alive/alivegoods', data).then(res => {
					console.log(res,"sadasdasdas")
					this.goodsList = res.data.data.data
					thisRef.goodsList = this.goodsList
				})
				uni.request({
					url: 'https://dsx.cdzer.com/api/Job/getshopjob', //仅为示例，并非真实接口地址。
					data: {
						shop_id: this.shopid,
						uid:userInfos.id
					},
					method: 'POST',
					header: {
						'content-type': 'application/x-www-form-urlencoded',
					},
					success: (res) => {
						console.log(res,"招聘招聘")
						this.zhilist = res.data.data
						thisRef.zhilist = this.zhilist
						thisRef.userInfos = userInfos
						thisRef.shop_id = this.shopid
					}
				});
			},




			scroll() {
				var testEl = this.$refs.notice;
				animation.transition(testEl, {
					styles: {
						color: '#FF0000',
						transform: 'translate(-700upx, 0upx)',
						transformOrigin: 'center center',
						opacity: '1'
					},
					duration: 6400, //ms
					timingFunction: 'linear',
					delay: 0 //ms
				});
			},

			showActive(data) {
				console.log("-> data", data);
				if (data.block_type !== 0) return;
				if (data.username && data.role === 'user') {
					this.currUserInfo = data;
					console.log("-> this.currUserInfo", this.currUserInfo);
				}
				/**
	"username": "Paker",
	"headimgurl": "https://dev.s1107.com/uploads/applyinfo/20210111/ca7d90051f0174db6ec4f663686e7403.jpg",
	"user_id": "140010",
	"msg": "888",
	"rank": "玩友",
	"member_rank": "普通",
	"integral": 0,
	"role": "user"
       * @author: jayson
       * @date: 20:52
       */
				// if (this.role !== 'user' && this.shopid == this.serviceShopId) {
				//
				// }
			},
			selectBlock(index) {
				this.selectIndex = index
			},
			blockUser() {
				uni.sendSocketMessage({
					data: JSON.stringify({
						type: 'blockUser',
						id: token,
						shopid: this.shopid,
						userid: this.currUserInfo.user_id,
						room: this.userInfo.room,
						blockType: this.selectIndex + 1
					})
				});
				this.cancleBlock()
				const list = [
					"已拉黑",
					"已禁言",
				]
				modal.toast({
					message: list[this.selectIndex],
					duration: 0.3
				});
			},
			cancleBlock() {
				this.$set(this, 'currUserInfo', {})
			},
			initWebsocket(room) {
				// console.log(this.msgList,"让我看看数据")
				const {
					platform
				} = uni.getSystemInfoSync()
				ws.WebSocket(LIVESOKECT, '');
				ws.onmessage(res => {
					let {
						data
					} = res;
					if (platform === 'ios') {
						data = JSON.parse(data);
					}
					console.log(data)
					if (data.type === 'init') {
						ws.send(
							JSON.stringify({
								type: 'bindalive_id',
								id: token,
								room: room,
								client_id: data.data.client_id
							})
						);
						this.client_id = data.data.client_id;
					}
					
					if (data.type === 'alivesay') {
						this.msgList.push(data.data);
						this.$nextTick(() => {
							setTimeout(() => {
								this.go2bottom();
							}, 50);
						});
					}

					if (data.type === 'notice') {
						console.log("发送消息被执行")
						this.msgList.push({
							msg: data.msg
						});
						this.userAvatarList.unshift(data.data.headimgurl);
						this.$nextTick(() => {
							setTimeout(() => {
								this.go2bottom();
							}, 50);
						});
					}

					// 断开直播间
					if (data.type === 'login_out') {
						console.log('======直播间已结束')
						console.log(data)
						modal.toast({
							message: data.data.msg,
							duration: 1
						});

						this.pullurl = '' //清除拉流源
						ws.close();

					}
				});
				ws.onopen(() => {
					console.log('直播socket已开启');
					setTimeout(() => {
						timer = setInterval(() => {
							ws.send(
								JSON.stringify({
									type: 'ping',
									id: token
								})
							);
						}, 9000);
					}, 3000);
				});
				ws.onclose(function(event) {
					clearInterval(timer);
					timer = null;
					ws.WebSocket(LIVESOKECT, '');
					modal.toast({
						message: '直播间已断开',
						duration: 1
					});
				});
				ws.onerror(function(event) {
					clearInterval(timer);
					timer = null;
					ws.WebSocket(LIVESOKECT, '');

				});
			},

			// 关注
			follow() {
				try {
					const value = uni.getStorageSync('userInfo');
					if (value) {
						this.userInfos = value
						var userInfos = JSON.parse(this.userInfos)
					}
				} catch (e) {
					// error
				}
				const list = [{
						path: 'api/CollShops/coll',
						message: "关注"
					},
					{
						path: 'api/CollShops/cancelcoll',
						message: "取消关注"
					},
				]
				let br_uid = userInfos.uid
				const obj = list[this.userInfo.is_follow]
				this.http(obj.path, {
					shop_id: this.shopid,
					br_uid
				}).then(res => {
					console.log(res)
					// modal.toast({
					// 	message: res.data.mess,
					// 	duration: 0.3
					// })
					if (this.userInfo.is_follow === 1) {
						return this.$set(this.userInfo, 'is_follow', 0)
					}
					this.$set(this.userInfo, 'is_follow', 1)

				})

			},


			// 跳到店铺详情页
			toShop(shop_id) {
				uni.navigateTo({
					url: '/pagesC/homeSon/storeDetails?shop_id=' + shop_id,
					animationType: 'slide-in-right',
					animationDuration: 300
				});
			},

			// 跳到商品详情页
			toGoodsDetali(goodsid) {
				uni.navigateTo({
					url: '/pagesC/homeSon/goodsDetails?id=' + goodsid,
					animationType: 'slide-in-right',
					animationDuration: 300
				});
			},
			onFocus(e) {
				if (uni.getSystemInfoSync().platform == 'ios') {

				}
			},
			onInput(e) {
				this.value = e.detail.value;

			},
			onKeyboard(e) {
				console.log(e)
				this.keyBoardHeight = e.detail.height
			},
			send() {
				if (!this.value) {
					uni.showToast({
						title: "发言不能为空",
						duration: 2000,
						icon: 'none'
					});
					return false;
				}
				uni.sendSocketMessage({
					data: JSON.stringify({
						type: 'alivesay',
						msgtype: 'text',
						id: token,
						room: this.userInfo.room,
						msg: this.value,
						client_id: this.client_id
					})
				});
				this.$refs.input.blur();
				this.isInputShow = false;
				this.value = '';
				uni.hideKeyboard();
			},

			go2bottom() {
				const indicatorId = 'msg-' + (this.msgList.length - 1);
				console.log("-> indicatorId", indicatorId);
				const indicator = this.$refs[indicatorId];
				console.log("-> indicator", indicator);
				const el = indicator;
				console.log("-> el", el);
				dom.scrollToElement(el[0], {
					offset: 300
				});

			},
			shareApp() {
				uni.switchTab({
					url: '/pages/tabBar/my'
				});
				uni.$emit('openShareApp', {})
			},

			showInput() {
				this.isInputShow = true;

				setTimeout(() => {
					this.$refs.input.focus();
				}, 80);
			},

			linkTo(url) {
				uni.navigateTo({
					url,
					animationType: 'pop-in'
				});
			},

			onstart(event) {
				this.state = 'onstart';
			},
			onpause(event) {
				this.state = 'onpause';
			},
			onfinish(event) {
				this.state = 'onfinish';
			},
			onfail(event) {
				this.state = 'onfail';
			},

			popupOverlayBottomClick() {
				this.isGoodsShow = false;
				this.isGiftShow = false;
				this.isGoodsAttrShow = false;
				this.isCustomerShow = false;
				this.isShareShow = false;
				this.isCommentShow = false;
				this.isForm = false;
			},

			onClose() {
				ws.close();
				uni.navigateBack({
					delta: 1
				});
			},



			onShare() {

				uni.share({
					type: 0,
					title: `${this.userInfo.title}`,
					summary: `${this.userInfo.title}${this.userInfo.live_desc}`,
					provider: 'weixin',
					scene: 'WXSceneSession',
					href: `${this.baseUrl}h5/#/platforms/mp-weixin/live-player?shopid=${this.shopid}?isFromShare=true`, //分享的标准格式为 "https://xxx.xxx.com/h5/#/...'
					imageUrl: this.userInfo.cover,
					success: () => {
						this.http('api/Alive/shareOk').then(res => {
							if (res.status === 200) {
								uni.showToast({
									title: "分享成功",
									duration: 2000,
									icon: 'none'
								});
							}
						})
					},
					fail: err => {
						uni.showToast({
							title: "分享失败",
							duration: 2000,
							icon: 'none'
						});
					}
				});
			},

			share(params) {
				uni.showActionSheet({
					itemList: ['微信分享', '微信朋友圈分享', 'QQ分享'],

					success: res => {
						const index = res.tapIndex;
						const provider = index === 2 ? 'qq' : 'weixin';
						let shareData = {};

						if (index === 2) {
							shareData = {
								provider: provider,
								// ...params,
								type: 1,
								title: params.href,
								href: params.href
							};
						} else if (index === 0) {
							shareData = {
								provider: provider,
								scene: 'WXSceneSession',
								...params
							};
						} else {
							shareData = {
								provider: provider,
								scene: 'WXSenceTimeline',
								...params
							};
						}
						uni.share({
							type: 0,
							...shareData,
							imageUrl: this.baseUrl + 'uploads/logo.png',
							success: () => {
								// showToast('分享成功')
								uni.showToast({
									title: "分享成功",
									duration: 2000,
									icon: 'none'
								});
								params.callBack();
							},
							fail: err => {
								console.log(JSON.stringify(err));
								// showToast('分享失败')
								uni.showToast({
									title: '分享失败',
									duration: 2000,
									icon: 'none'
								});
							}
						});
					},
					fail: () => {}
				});
			}
		}
	};
</script>

<style scoped>
	.swiper-box {
		height: 1200upx;
		width: 100%;
		background-color: #000000;
	}
	
	.swiper {
		height: 100%;
		width: 100%;
		
	}
	
	.swiper-item {
		width: 100%;
		height: 100%;
		position: relative;
	
		
	}
.boxCeshiRight {
			position: absolute;
			bottom: 500rpx;
			right: 50rpx;
			width: 200rpx;
			height: 180rpx;
			background-color: #fff;
		}
	
		.boxCeshiLeft {
			position: absolute;
			bottom: 500rpx;
			left: 50rpx;
			width: 200rpx;
			height: 200rpx;
			background-color: #fff;
		}
	.renqi {
		display: flex;
		background: rgba(255, 255, 255, 0.2);
		align-items: center;
		justify-content: center;
		width: max-content;
		padding: 8upx;
		border-radius: 15upx;
		margin: 100upx 30upx;
		/* 		position: absolute;
		top: 200upx; */
	}

	.banned {
		position: fixed;
		top: 340upx;
		left: 53upx;
		width: 645upx;
		height: 675upx;
		text-align: center;
		align-items: center;
		justify-content: center;
		background-color: #333;
		/* background-size: 645upx 675upx; */
		border-width: 1upx;
		border-style: solid;
	}

	.like-image {
		position: fixed;
		right: 26upx;
		bottom: 88upx;
		width: 80upx;
		height: 80upx;
		opacity: 1;
		transition-property: transform, opacity;
		transition-duration: 2s;
		transition-delay: 0s;
		transition-timing-function: ease-out;
		z-index: -1;
	}

	.like-active0 {
		opacity: 0;
		transform: translate(0, -400upx) scale(1.2);

	}

	.like-active1 {
		opacity: 0;
		transform: translate(30upx, -300upx) scale(1.1) rotate(340deg) perspective(10upx);

	}

	.like-active2 {
		opacity: 0;
		transform: translate(80upx, -400upx) scale(1.3) rotate(240deg) perspective(30upx);

	}

	.like-active3 {
		opacity: 0;
		transform: translate(-110upx, -1000upx) scale(1.4) rotate(40deg) perspective(40upx);
	}

	.like-active4 {
		opacity: 0;
		transform: translate(-75upx, -400upx) scale(1.1) rotate(120deg) perspective(-140upx);
	}

	.like-active5 {
		opacity: 0;
		transform: translate(-10upx, -600upx) scale(1.6) rotate(80deg) perspective(-70upx);
	}

	.like-active6 {
		opacity: 0;
		transform: translate(-50upx, -400upx) scale(1.8) rotate(20deg) perspective(-10upx);
	}

	.banned-title__wrap {
		align-items: center;
	}

	.banned-title {
		margin-top: 120upx;
		text-align: center;
	}

	.banned-title__user {
		margin-bottom: 20upx;
		color: #fff;
		font-size: 36upx;
	}

	.banned-title__text {

		margin-bottom: 40upx;
		color: #fff;
		font-size: 36upx;
	}

	.banned-choose {
		width: 397upx;
	}

	.banned-choose__item {
		flex-direction: row;
		justify-content: space-between;
		align-items: flex-start;
		width: 397upx;
		margin-top: 30upx;
	}

	.banned-choose__item--text {
		color: #333;
		font-size: 32upx;
	}

	.banned-choose__item--img {
		width: 30upx;
		height: 30upx;
	}

	.banned-choose__btn {
		width: 397upx;
		height: 66upx;
		line-height: 66upx;
		margin-top: 60upx;
		text-align: center;
		justify-content: center;
		align-items: center;
		background-color: rgba(250, 62, 63, 1);
		border-radius: 45upx;
	}

	.banned-choose__btn--text {
		color: #fff;
		font-size: 32upx;
	}


	.live-colse {
		position: fixed;
		top: 290upx;
		right: 80upx;
		width: 53upx;
		height: 53upx;
	}


	.mainWrap {
		position: fixed;
		width: 750upx;
		flex: 1;
		height: 1334upx;

		background-size: cover;
	}

	.comments {
		margin: 0 30upx;
		padding: 40upx 0;
		border-bottom-style: solid;
		border-bottom-width: 1upx;
		border-bottom-color: #f3f3f3;
	}

	.tip-scroller__msg {
		flex-direction: row;
		flex-wrap: wrap;
		align-items: center;
		margin-bottom: 8upx;
		border-radius: 100upx;
		padding: 2upx 6upx;
		width: 500upx;

	}

	.tip-scroller__username {
		color: rgba(255, 143, 45, 1);
		font-size: 24upx;

	}

	.tip-scroller__content {
		color: #fff;
		font-size: 22upx;
		background-color: rgba(0, 0, 0, 0.5);
		border-radius: 100px;
		padding: 0 14upx;
		height: 34upx;
		line-height: 34upx;
	}

	.tip-scroller__tag {

		padding: 2upx 6upx;
		margin-right: 6upx;
		font-size: 20upx;
		text-align: center;
		color: #fff;
		border-radius: 200px;
		background-image: linear-gradient(to right, #ff6f0f, #fa3e3f);
	}

	.tip-scroller__member {
		border-radius: 200px;
		background-image: linear-gradient(to right, #ff9900, #ffaf37);
	}

	.comments-top {
		flex-direction: row;
		align-items: center;
		margin-bottom: 25upx;
	}

	.comments-top_img {
		width: 95upx;
		height: 95upx;
		margin-right: 25upx;
		border-radius: 50%;
	}

	.comments-top__right {
		flex: 1;
	}

	.comments-text {
		color: #333;
		font-size: 28upx;
		line-height: 40upx;
	}

	.comments-top__right--top {

		margin-bottom: 10upx;
		color: #333;
		font-size: 30upx;
	}

	.comments-top__right--bottom {

		color: #999;
		font-size: 22upx;
	}

	.frame {
		width: 750upx;
		flex: 1;
		position: relative;
		font-size: 50upx;
	}

	.main {
		width: 750upx;
		flex: 1;
		position: relative;
	}

	.header {
		justify-content: space-between;
		flex-direction: row;
		align-items: center;
		padding: 50upx 24upx 30upx 14upx;
		margin-top: 30upx;
		width: 750upx;
		position: fixed;
	}

	.header-left {
		flex-direction: row;
		align-items: center;
		background-color: rgba(0, 0, 0, 0.3);
		border-radius: 72upx;
		padding: 6upx 10upx;

	}

	.avatar {
		width: 72upx;
		height: 72upx;
		margin-right: 10upx;
		border-radius: 100%;
		background-color: rgba(0, 0, 0, 0.5);
	}

	.header-left__middle--top {
		font-size: 28upx;
		color: #fff;
		margin-bottom: 6upx;
		text-overflow: ellipsis;
		lines: 1;
		width: 170upx;
		flex: 1;
		font-weight: 600;

	}

	.header-left__middle--bottom {

		font-size: 20upx;
		color: #fff;
	}

	.cell-item {
		padding-right: 30upx;
		padding-left: 30upx;
		margin-top: 10upx;
		justify-content: space-between;
	}

	.header-left__right {
		justify-content: center;
		align-items: center;
		width: 136upx;
		padding: 18upx 10upx;
		background-image: linear-gradient(to bottom, #ffa468, #fa3f3f);
		border-radius: 100upx;
		text-align: center;

	}

	.follow {
		color: #fff;
		font-size: 25upx;
		font-weight: bold;
	}

	.info {
		flex-direction: row;
	}

	.info-left {
		flex-direction: row;
		align-items: center;
		height: 47upx;
		padding: 0 19upx 0 24upx;
		background-color: rgba(0, 0, 0, 0.5);
		border-radius: 50upx;
		margin: 0 20upx;
	}

	.action {
		position: fixed;
		bottom: 400upx;
		left: 39upx;
		z-index: 11111;
		width: 447upx;
		height: 140upx;
		border-bottom-left-radius: 10upx;
		border-bottom-right-radius: 10upx;
		border-top-left-radius: 10upx;
		border-top-right-radius: 10upx;
		background-color: #fff;
	}

	.action-list {
		flex: 1;
		flex-direction: row;
		height: 140upx;
		padding-top: 20upx;
	}

	.action-item {
		flex: 1;
		justify-content: center;
		text-align: center;
		align-items: center;
	}

	.action-item__img {

		width: 35upx;
		height: 44upx;
		margin-bottom: 6upx;
	}

	.action-item__text {
		color: #333;
		font-size: 28upx;
		text-align: center;
	}

	.tip {
		position: absolute;
		bottom: 240upx;
		left: 24upx;
	}

	.tip-content {
		width: 500upx;
		height: 140upx;
		font-size: 13upx;
		padding: 15upx;
		margin-bottom: 12upx;
		background-color: rgba(0, 0, 0, 0.4);
		border-radius: 18upx;
		color: #ff8534;
	}

	.tip-scroller {
		height: 420upx;
	}

	.text {
		font-size: 28upx;
		color: #fccb59;
		height: 280upx;
		line-height: 40upx;
	}

	.input-wrap {
		position: fixed;
		z-index: 11;
		width: 750upx;
		background-color: #fff;
		bottom: 0;
		transition: all 0.6;
	}

	.input {
		flex: 1;
		height: 76upx;
		padding: 0 38upx;
		background-color: #fff;
		border-radius: 10upx;
		color: #333;
		font-size: 28upx;
	}

	.footer {
		position: fixed;
		align-items: center;
		justify-content: space-between;
		bottom: 46upx;
		padding: 0 16upx;
		flex-direction: row;
		left: 0;
		right: 0;
		width: 750upx;
	}

	.footerRight {
		flex-direction: row;

	}

	.footerShareIcon {
		margin-right: 30upx;
		opacity: 0.7;
	}

	.color-white {
		color: #fff;
		line-height: 74upx;
		font-size: 30upx;
	}

	.like-icon {
		width: 64upx;
		height: 64upx;
		line-height: 64upx;

		border-radius: 100upx;
		color: #ffffff;
		text-align: center;
		line-height: 52upx;

		font-size: 10upx;
		margin: 0 8upx;
		align-items: center;
		position: relative;
	}

	.like-icon {
		margin-left: 0;
	}

	.footerOrder {
		margin-left: 20upx;
		margin-bottom: 10upx;
		width: 78upx;
		height: 86upx;
		justify-content: center;
		align-items: center;
		background-size: contain;
		position: relative;
		background-image: url('../../static/images/live/icon-liveBaby.png');
	}

	.goodsImg {
		width: 66upx;
		height: 76upx;
	}

	.goodsListLength {
		font-size: 32upx;
		font-weight: 600;
		position: absolute;
		top: 43upx;
		left: 39upx;
		transform: translate(-50%, -30%);
	}

	.chat {
		background-color: rgba(0, 0, 0, 0.3);
		padding: 1upx 28upx;
		border-radius: 100upx;
		margin: 0 6upx;
		width: 380upx;
		font-size: 28upx;
		color: #c0c0c0;
		font-size: 10upx;
	}

	.popup-wrap {
		height: 820upx;
		border-top-right-radius: 10upx;
		border-top-left-radius: 10upx;
		overflow: hidden;
	}

	.popup-title3 {
		flex-direction: row;
		position: relative;
		width: 750upx;
		height: 104upx;
		align-items: center;
		text-align: center;
		border-bottom-style: solid;
		border-bottom-width: 2upx;
		border-bottom-color: #eee;
		justify-content: space-between;
		padding: 0 15upx;
		background-color: #fff;
	}

	.popup-left {
		font-size: 32upx;
		color: #333333;
	}

	.customer-list {
		width: 750upx;
		height: 816upx;
	}

	.no-more {
		height: 110upx;
		line-height: 110upx;
		text-align: center;
		color: #999;
		font-size: 30upx;
	}

	.popup-panel {
		border-top-left-radius: 14upx;
		border-top-right-radius: 14upx;
		width: 750upx;
	}

	.shareBox {
		flex-direction: row;
		justify-content: space-around;
		width: 750upx;
	}

	.shareItem {
		margin: 30upx;
		align-items: center;
	}

	.shareIconWrap {
		width: 116upx;
		height: 116upx;
	}

	.shareTit {
		font-size: 24upx;
		color: #666;
	}

	.frame {
		flex: 1;
		position: relative;
	}

	.report-anchor {
		height: 50rpx;
		font-size: 24upx;
		color: #fff;
		flex-direction: row;
		background-color: #9f9f9f;
		align-items: center;
		border-radius: 200upx;
		border-style: solid;
		border-width: 2upx;
		border-color: #fff;
		padding: 8upx;
		opacity: 0.5;
		position: fixed;
		right: 100upx;
		top: 84upx;

	}

	.topRightWrap {
		flex-direction: row;
		background-color: rgba(0, 0, 0, 0.3);
		align-items: center;
		border-radius: 200upx;
		border-style: solid;
		border-width: 2upx;
		border-color: #fff;
		padding: 8upx;
		opacity: 0.5;
		position: fixed;
		right: 30upx;
		top: 80upx;
	}

	.topRightWrapClose {
		width: 35upx;
		height: 35upx;
		border-radius: 200upx;
		padding: 8upx;
	}

	.videoPlayer {
/* 		position: fixed;
		top: 0;
		bottom: 0;
		left: 0;
		right: 0; */
	}

	.liveTipsWrap {
		position: fixed;
		top: 280upx;
		left: 50upx;
		width: 650upx;
		border-radius: 12upx;
		padding: 30upx;
		text-align: center;
		background-color: rgba(0, 0, 0, 0.5);
	}

	.endName {
		font-size: 36upx;
		font-weight: 800;
		text-align: center;
	}

	.liveIntroduction {
		line-height: 42upx;
	}

	.blockWrap {
		background-color: rgba(0, 0, 0, 0.3);
		padding: 20upx 30upx;
		border-radius: 20upx;
		position: fixed;
		top: 700upx;
		transform: translate(-50%, -50%);
		width: 540upx;
	}

	.blockUserInfo {
		margin: 20upx;
		align-items: center;
	}

	.blockAvatar {
		width: 150upx;
		height: 150upx;
		border-radius: 400upx;
		margin-bottom: 15upx;
	}

	.blockWrapSselect {
		flex-direction: row;
		align-items: center;
	}

	.selectName {
		font-size: 28upx;
		color: #fff;
	}

	.selectNameactive {
		color: limegreen
	}

	.selectCircleactive {
		background-color: limegreen;
		border-color: transparent;
	}

	.selectCircle {
		border-color: #fff;
		border-width: 4upx;
		border-style: solid;
		width: 40upx;
		height: 40upx;
		border-radius: 200upx;
		margin-bottom: 8upx;
	}

	.selectItem {
		margin-right: 40upx;
		text-align: center;
		align-items: center;
	}

	.confirmBtn {
		background-color: #ff9900;
		color: #fff;
		border-color: transparent;
		margin-top: 30upx;
	}

	.cancleBtn {
		padding: 30upx;
		text-align: center;
		color: #fff;
		font-size: 24upx;
	}

	.selectmask {
		position: fixed;
		top: 0;
		bottom: 0;
		right: 0;
		background-color: rgba(0, 0, 0, 0, 3);
	}

	.giftPanel {
		background-color: rgba(0, 0, 0, 0.5);
		padding: 10px;
		height: 640px;
		width: 750upx;
		border-top-right-radius: 10px;
		border-top-left-radius: 10px;
	}

	.giftTitleWrap {
		flex-direction: row;
	}

	.gifSendWrap {
		flex-direction: row;
		justify-content: space-between;
	}

	.giftSendBtn {
		color: #fff;
		width: 140upx;
		padding: 10upx 20upx;
		border-radius: 200px;
		background-color: #9013FE;
		margin-top: 8upx;
		font-size: 28upx;
		text-align: center;

	}

	.giftTitle {
		color: #fff;
		margin-bottom: 5px;
		font-size: 32upx;
	}

	.giftBox {
		flex-direction: row;
		flex-wrap: wrap;
		width: 750upx;
	}

	.gitBoxItem {
		border: 1px solid rgba(255, 255, 255, 0.1);
		padding: 10px;
		width: 180upx;
		height: 180upx;
		text-align: center;
		justify-content: center;
		align-items: center;
	}

	.gitBoxItemPic {
		width: 130upx;
		height: 130upx;
		z-index: 9999999
	}

	.gitBoxItemName {
		color: #eee;
		font-size: 24upx;
	}

	.isGiftActive {
		border: 2px solid #9013FE;
		transition: all 1s;
	}

	.animationGift {
		width: 280upx;
		height: 280upx;
		position: fixed;
		bottom: 200upx;
		left: 220upx;
		z-index: 99999;
		/* border:1px solid red */
	}
</style>
